/* eslint-disable react/jsx-indent */
/* eslint-disable no-nested-ternary */
import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { exportQAHistories } from '@/services/download';
import qs from 'qs';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Card, Row, Col, Form, Input, Button, message, Icon, Checkbox, Table, Tag, Select, Modal, Radio, Spin, Upload, Tabs, Tooltip } from "antd";
import Custom from './custom.js'
import CustomNew from './customNew'

const { TabPane } = Tabs;
const FormItem = Form.Item;
const Search = Input.Search;
const InputGroup = Input.Group;
import styles from "./index.less";
const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
import pen from '../../../assets/icons/bi.png';
import ljx from '../../../assets/icons/垃圾箱.png';


class System extends Component {
  state = {
    color: 'rgba(0, 0, 0, 0.65)',
    colorName: null,
    query: '',
    pdx: 0,
    list: [],
    arrayS: { name: '', id: '', desc: '' },
    showModel1: false
  };

  componentDidMount() {
    this.fetch()
  }

  // 主页列表
  fetch = (val = '') => {
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;

    const { dictType, page, limit, dictNames } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'customDictionary/BasicDictSysList',
        payload: { query: val },
        callback: res => {
          console.log(res)
          this.props.totalBHome(res.length)
          if (res.length === 0) {
            let list = [{
              createTime: "",
              desc: "",
              dictType: "",
              id: "",
              items: [],
              name: "搜索为空",
              updateTime: ""
            }]
            this.setState({
              list,
              arrayS: list[0]
            })
          } else {
            this.setState({
              list: res,
              arrayS: res[0]
            })
          }

        },
      });
    });
  }

  // 搜索
  search = (val) => {

    const { list } = this.state
    this.fetch(String(val))
  }



  callback = (key) => {


  }

  showRev = (a, b) => {
    //
    this.setState({ colorName: b })
  }

  showRevS = (a, b) => {
    //
    this.setState({ colorName: null })
  }

  handleDeletes = (e, index) => {

    this.setState({ pdx: index, arrayS: e })

  }

  listHq = () => {
    const { dispatch, currentUser } = this.props;
    const { query } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'businessDictionary/BasicDictSysList',
        payload: { query, },
        callback: res => {
          message['info'](`${res.msg}`)
        },
      });
    });
  }
  addContent = () => {
    this.setState({
      showModel1: true,
    });
  };
  Tooltipzdy = () => {
    return (
      <div>
        {`添加实体`}
        <span style={{ marginLeft: 12, paddingTop: 3 }}>
          <Tooltip
            placement="top"
            title="实体名称是一类核心词的总称，如核心词是中国银行、邮政银行、建设银行、招商银行等，那实体名称就可以写成银行类型。"
            arrowPointAtCenter
          >
            <Icon style={{ fontSize: 14 }} type="info-circle" />
          </Tooltip>
        </span>
      </div>
    );
  };
  coreWordOne() {
    this.props.form.validateFields((err, values) => {
      // 校验方法
      let userInfo = this.props.form.getFieldsValue(); // 获取数据
      if (!err) {
        console.log(values)
        let obj = {
          name: values.corewordone,
          item: values.corewordonecode,
          descrion: values.corewordonedescribe
        }
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'customDictionary/addSys',
            payload: obj,
            callback: res => {
              message['info'](`${res.msg}`);
              this.setState(
                {
                  showModel1: false,
                },
                () => {
                  this.props.form.resetFields();
                  this.fetch();
                }
              );
            },
          });
        });
      }
    });

  }

  // eslint-disable-next-line react/sort-comp
  render() {
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        // 文字
        xs: 24,
        sm: 4,
      },
      wrapperCol: {
        // 输入框
        xs: 24,
        sm: 20,
      },
    };
    return (
      <div style={{ display: 'flex', flexWrap: 'nowrap', paddingBottom: 20 }}>
        <div style={{ minWidth: 250, background: '#f7f7f7', marginRight: 20, width: '10%' }} >
          <Row>
            {/* <Col style={{ background: '#e4e4e8', height: 50, padding: '9px' }} span={15}>
              <Search
                placeholder="请输入搜索内容"
                onSearch={value => this.search(value)}
              />
            </Col> */}
            {/*<Col span={24} style={{ background: '#e4e4e8', height: 50, padding: '9px 0',textAlign:'center' }}>*/}
            {/*  <span className="zdyButtonA">*/}
            {/*    <Button type="primary" onClick={this.addContent} icon="plus">*/}
            {/*      添加*/}
            {/*    </Button>*/}
            {/*  </span>*/}
            {/*</Col>*/}
            <Col span={24}>
              <div style={{ height: 24 }}></div>

              {
                this.state.list.map((item, index) => {
                  let a = this.state.colorName === index ? '#2B47E6' : 'rgba(0, 0, 0, 0.65)'
                  let leftText = this.state.pdx === index ? { background: 'rgba(43, 71, 230, 0.12)', padding: '12px 40px', margin: '0px 8px', color: '#2B47E6' } : { padding: '12px 40px', margin: '0px 8px', color: a }
                  return <p className={styles.leftStyle} onMouseOut={() => { this.showRevS(item, index) }} onMouseOver={() => { this.showRev(item, index) }} onClick={() => { this.handleDeletes(item, index) }} style={leftText} key={index}>{item.name}</p>
                })
              }
              <div style={{ height: 24 }}></div>
            </Col>
          </Row>
        </div>
        <div style={{ width: '90%' }}>

          <div style={{ background: '#f7f7f7', padding: '18px 26px' }}>
            <span style={{ float: "left", fontSize: 16, fontWeight: 600, marginRight: 10 }}>{this.state.arrayS.name}</span>
            <span style={{ color: '#d1d5da' }}>{this.state.arrayS.id ? this.state.arrayS.id : ''}</span>
            <p></p>
            <span style={{ color: '#80909b' }} dangerouslySetInnerHTML={{ __html: this.state.arrayS.description }}></span>
          </div>
        </div>


        <Modal
          className="modelZdy"
          title={this.Tooltipzdy()}
          visible={this.state.showModel1}
          okText={<FormattedMessage id="app.customDictionary.save" />}
          cancelText={<FormattedMessage id="app.customDictionary.cancel" />}
          onCancel={() => {
            this.props.form.setFields({ corewordone: '' });
            this.setState({
              showModel1: false,
            });
          }}
          onOk={this.coreWordOne.bind(this)}
        >
          <Form layout="horizontal">
            <FormItem label="实体名称" onSubmit={this.coreWordOne} {...FormItemLayont}>
              {getFieldDecorator('corewordone', {
                // initialValue: `${this.state.formatC}`,
                rules: [
                  { required: true, message: '实体名称不能为空' },
                  (rule, value = '', callback) => {
                    try {
                      if (value.length > 20) {
                        callback('实体名称不可超过20个字符');
                      }
                      callback();
                    } catch (err) {
                      callback(err);
                    }
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="实体代码" onSubmit={this.coreWordOne} {...FormItemLayont}>
              {getFieldDecorator('corewordonecode', {
                rules: [
                  { required: true, message: '实体代码不能为空' }
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="实体描述" onSubmit={this.coreWordOne} {...FormItemLayont}>
              {getFieldDecorator('corewordonedescribe', {
                // rules: [
                //   { required: true, message: '实体描述不能为空' }
                // ],
              })(<TextArea rows={4} />)}
            </FormItem>
          </Form>
        </Modal>
      </div>



    );
  }


}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(System));
